<template>
	<view class="container">
		<!-- 【线下】订单支付成功 -->
	    <view class="result-wrap" v-if="status===1">
	        <view class='image-wrap'>
	            <image src="/static/images/icon/pay-success.png" class="success-img"></image>
	        </view>
	        <view class='text-wrap'>
	            <view class="success-text">订单提交成功</view>
	            <view class="success-text">请线下支付</view>
	        </view>
	        <view class="to-order-btn" @click="goUrl('/pages/index/index',false,true)">
	            继续逛逛
	        </view>
	        <view class='btn-go-order' @click="goUrl('/pages/my/my',false,true)">返回我的页面</view>
	    </view>
		<!-- 【线下】订单支付失败 -->
	    <view  class="result-wrap" v-if="status===0">
	        <view class='image-wrap'>
	            <image src="/static/images/icon/pay-error.png" class="success-img"></image>
	        </view>
	        <view class='text-wrap'>
	            <view class="text">提交失败</view>
	            <button class='contact-wrap'open-type="contact" >
	                <image src="/static/images/icon/contact.png" class='contact-icon'></image>
	                <view class='contact'>联系客服</view>
	            </button>
	        </view>
	        <view class='btn-go-order' @click="goUrl('/pages/my/my',false,true)">返回我的页面</view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:''  // 状态
			};
		},
		onLoad(options) {
			this.status = options.status*1
		}
		
	}
</script>

<style lang="scss">
page {
    height: 100%;
    background: #fafafa;
}

.container {
    background-color: #fafafa;
    align-items: flex-start;
    overflow-x: hidden;
}

.result-wrap {
    width: 100%;
    height: 40%;
    background: #fff;
    padding: 40rpx 0 60rpx 0;
}

.image-wrap {
    width: 100%;
    height: 100rpx;
    margin: 40rpx 0;
    display: flex;
    justify-content: center;
}

.success-img {
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto;
}

.text-wrap {
    width: 100%;
    margin-bottom: 40rpx;
}
.success-text {
    font-size: 30rpx;
    color: #233445;
    text-align: center;
    line-height: 60rpx;
    margin-bottom: 20rpx;
}
.text {
    font-size: 30rpx;
    color: #999;
    text-align: center;
    line-height: 60rpx;
    margin-bottom: 20rpx;
}
.btn-go-order{
    color: #999;
    width: 300rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 28rpx;
    margin: 0 auto;
}
.to-order-btn {
    color: #fff;
    background: linear-gradient(to right, #ff3456, #ff347d);
    border-radius: 0px;
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    margin: 0 auto;
}
.tips{
    display: flex;
    flex-direction: column;
}
.tips .p{
    width: 100%;
    text-align: center;
    line-height: 40rpx;
    height: 40rpx;
    font-size: 28rpx;
    color: #233445;
}
.p .time{
    color: #ff3456;
}

.contact-wrap{
    height: 100rpx;
    line-height: 100rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}
.contact-wrap::after{
    border: none;
}
.contact-wrap .contact-icon{
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
}
.contact-wrap .contact{
    font-size: 28rpx;
    color: #1296db;
}

</style>